<template>
  <div>
    <div class="hot-g-row">
      <el-empty style="background: #ffffff;border-radius: 4px;margin: 0 10px;" v-if="!(contentList && contentList.length)"/>
      <rectangle :link="'/' + type + '/detail'" v-else v-for="(item, index) in contentList" :item="item" :key="item.id" :width="width" :row-first-item="index !== 0 && index % rowItemNum === 0"></rectangle>
    </div>
  </div>
</template>

<script>
  import rectangle from "./rectangle";
  import {ref, nextTick, watch} from "vue";
export default {
  name: "rowTabsContent",
  components: {
    rectangle
  },
  props: {
    itemList: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      default: "learn"
    }
  },
  setup(props) {
    const width = ref("")
    const calcWidth = () => {
      let clientWidth = document.body.clientWidth;
      if (clientWidth > 1400) {
        clientWidth = 1400;
      }
      if (clientWidth < 1300) {
        clientWidth = 1300;
      }
      const mWidth = 180;
      for (let i = 2;; i++) {
        const totalWidth = 100 + mWidth * i
        if (clientWidth < totalWidth) {
          return 1;
        } else if (totalWidth <= clientWidth && clientWidth < totalWidth + mWidth) {
          return i - 2 || 1;
        }
      }
    }
    // 显示多少行
    const showRowNum = 2
    // 每行多少数量
    const rowItemNum = ref(1)
    // 换一换
    const contentList = ref([])
    let pageNum = 0;
    const change = () => {
      if (props.itemList && props.itemList.length) {
        const pageSize = rowItemNum.value * showRowNum;
        const start = pageNum * pageSize;
        let end = (pageNum + 1) * pageSize;
        if (end >= props.itemList.length) {
          end = props.itemList.length;
          pageNum = 0
        } else {
          pageNum++;
        }
        contentList.value = props.itemList.slice(start, end);
      }
    }
    nextTick(function() {
      const x = 10 * 2
      width.value = "calc(" + 100 / calcWidth() + "% - " + x + "px)"
      rowItemNum.value = calcWidth()
      window.addEventListener("resize", () => {
        const x = 10 * calcWidth() * 2 / calcWidth()
        width.value = "calc(" + 100 / calcWidth() + "% - " + x + "px)"
        rowItemNum.value = calcWidth()
      });
    });
    watch(() => rowItemNum.value, () => {
      change()
    });
    watch(() => props.itemList, () => {
      change()
    });
    return {
      width,
      contentList,
      rowItemNum
    }
  }
}
</script>

<style lang="scss" scoped>
  h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
  }
  .module-mod {
    color: #000;
    position: relative;
    z-index: 2;
    .hot-g-row {
      white-space: nowrap;
      overflow: auto;
      &::-webkit-scrollbar { width: 0 !important }
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
    }
  }
</style>
